import React, { useState, useTransition } from 'react';

const App = () => {

  const [inpVal, setInpVal] = useState('')

  // isPending 用来判断标记是否开启等待的状态
  const [ isPending, startTransition ] = useTransition()

  const [count, setCount] = useState(0)


  // 该代码可以记录一段或者一些代码的执行时间
  //  console.time 开始记录一段代码的执行时间
  // console.time('qqqqqqqq')
  // document.createElement('div')
  // console.timeEnd 用来标记记录时间结束
  // console.timeEnd('qqqqqqqq')

  function btnClick(){
    // 开启非阻塞，当有其他数据更新时，有优先更新其他数据
    startTransition(() => {
      // 更新状态
      setCount(count + 1)
    })
  }
  return (
    <div>
      <div>{inpVal}</div>
      <input type="text" value={inpVal} onChange={e => setInpVal(e.target.value)} />

      <button onClick={btnClick}>{count}</button>
      {/* 如果开启状态更新我们要显示的内容 */}
      {isPending && <div>111111111111111111111</div> }

    </div>
  );
};

export default App;
